<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
<!-- html的头部内容，如title、css等。 -->
<title>组织机构</title>
</jsp:attribute>

<jsp:attribute name="body">
<!-- 页面的主要内容 -->
<div class="row">
	<div class="col-md-12">
		<!--box-->
		<div class="box box-primary">
			<div class="box-body">
				<form class="form-inline" id="formSearch">					
					<div class="form-group">
						<input class="form-control" type="text" name="code" placeholder="部门编号" style="width:180px;">
					</div>
					<div class="form-group">
						<input class="form-control" type="text" name="name" placeholder="部门名称" style="width:180px;">
					</div>
					<div class="form-group">
						<input class="form-control" type="text" name="parentName" placeholder="上级部门" style="width:180px;">
						<input type="hidden" name="parentId">
					</div>
				</form>
				<!-- /form -->
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="btn-group">
					<button class="btn btn-primary" id="btnSearch" style="width:110px">查询</button>
				</div>
				<div class="btn-group">
					<button class="btn btn-success" id="btnAdd" style="width:110px">添加部门</button>
				</div>				
			</div>
			<!-- /.box-footer -->
		</div>
		<!-- /.box -->
	</div>
</div>
<!-- /.row -->

<div class="row">
	<div class="col-md-12">
		<div class="box box-primary">
			<div class="box-body no-padding">
				<table id="table"></table>
				<!-- /#table -->
			</div>
			<!-- /.box-body -->
		</div>	
	</div>
</div>
<!-- /.row -->
</jsp:attribute>

<jsp:attribute name="dialog">
<!-- 页面的dialog，注意不能放到body中 -->

<form id="formAdd">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">上级部门</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="parentName" placeholder="请选择上级部门，如果没有上级部门请留空。">
						<input type="hidden" name="parentId" value="0">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="必填，部门名称不超过20个字。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门编号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="code" placeholder="必填，部门编号不超过20个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门电话</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="url" placeholder="选填，请输入部门的联系电话。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门邮箱</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="email" placeholder="选填，请输入部门邮箱。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门排序</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sort" placeholder="选填，同一层级部门的排序，值越小越靠前。" value="1000">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formAdd -->


<form id="formEdit">
	<input type="hidden" name="id">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">上级部门</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="parentName" placeholder="请选择上级部门，如果没有上级部门请留空。">
						<input type="hidden" name="parentId" value="0">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="必填，部门名称不超过20个字。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门编号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="code" placeholder="必填，部门编号不超过20个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门电话</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="url" placeholder="选填，请输入部门的联系电话。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门邮箱</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="email" placeholder="选填，请输入部门邮箱。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">部门排序</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sort" placeholder="选填，同一层级部门的排序，值越小越靠前。" value="1000">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formEdit -->


<div id="dialogDeptTree">
	<ul id="deptTree" class="ztree" style="width:100%;height:100%;overflow:auto;"></ul>
</div>
<!-- /#dialogDeptTree -->

</jsp:attribute>

<jsp:attribute name="script">
<!-- 页面的JS脚本 -->
<script type="text/javascript">
	$(function(){
		$('#btnSearch').on('click', function() {
			$('#table').bootstrapTable('refresh', {
				silent: true
			});
			return false;
		});
		
		$('#btnAdd').on('click', function() {
			SpdUI.openFormDialog('#formAdd');
			return false;
		});
		
		$('form input[name="parentName"]').on('click', function(){
			var $this = $(this), $form = $this.closest('form');
			SpdUI.openDialog('#dialogDeptTree', {
				form: $form
			});
			return false;
		});
		
		SpdUI.bootstrapTable('#table', {
			url: SpdUI.contextPath + '/admin/sysdept/queryPage.do',
			columns: [{
				title: '部门编号',
				field: 'code',
				width: 150
			},{
				title: '部门名称',
				field: 'name',
				width: 200
			},{
				title: '上级部门',
				field: 'parentName',
				width: 200
			},{
				title: '部门电话',
				field: 'phone',
				width: 170
			},{
				title: '部门邮箱',
				field: 'email'
			},{
				title: '部门排序',
				field: 'sort',
				width: 120
			},{
				title: '操作',
				field: 'id',
				width: 120,
				formatter: function(vale, row, index) {
					var html = '';
					html += '<div class="btn btn-xs btn-primary btn-row-edit">编辑</div>&nbsp;';
					html += '<div class="btn btn-xs btn-danger btn-row-delete">删除</div>';
					return html;
				},
				events: {
					'click .btn-row-edit': function(event, value, row, index) {
						SpdUI.openFormDialog('#formEdit', row);
					},
					'click .btn-row-delete': function(event, value, row, index) {
						SpdUI.confirm('确定删除该部门？', function(){
							SpdUI.getJSON({
								url: SpdUI.contextPath + '/admin/sysdept/delete.do',
								data: {
									id: row.id
								},
								success: function(data, json){
									$('#table').bootstrapTable('refresh', {
										silent: true
									});
								}
							});
						});
					}
				}
			}],
			queryParams: function(params) {
				var $form = $('#formSearch');
				
				params.name = $.trim($form.find('[name="name"]').val());
				params.code = $.trim($form.find('[name="code"]').val());
				params.parentId = $form.find('[name="parentId"]').val();
				
				return params;
			}
		});
		
		SpdUI.formDialog('#formAdd', {
			title: '添加部门',
			validate: {
				name: {
					rule : 'required;length(1~20);',
					msg : '请输入部门名称，不得超过20个字。'
				},
				code: {
					rule : 'required;length(1~20);',
					msg : '请输入部门编号，不超过20个字符。'
				},
				sort: {
					rule: 'required;integer(+);',
					msg: '请输入大于0的排序'
				}
			},
			onsubmit: function($form, formData, dialog, dialogData) {
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysdept/add.do',
					success: function(data, json){						
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			}
		});
		
		SpdUI.formDialog('#formEdit', {
			title: '编辑部门',
			validate: {
				name: {
					rule : 'required;length(1~20);',
					msg : '请输入部门名称，不得超过20个字。'
				},
				code: {
					rule : 'required;length(1~20);',
					msg : '请输入部门编号，不超过20个字符。'
				},
				sort: {
					rule: 'required;integer(+);',
					msg: '请输入大于0的排序'
				}
			},
			onsubmit: function($form, formData, dialog, dialogData) {
				if(formData.parentId == formData.id){
					SpdUI.alert('不能选择自己作为上级部门！');
					return;
				}
				
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysdept/update.do',
					success: function(data, json){
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			}
		});
		
		
		SpdUI.dialog('#dialogDeptTree', {
			title: '选择上级部门',
			closeLabel: '清空选择',
			dialogData: {
				treeId: 'deptTree'
			},
			buttons: [{
				label: '确定选择',
				cssClass: 'btn-success',
				action: function(dialog, dialogData, dialogBody) {
					var treeId = dialogData.treeId,
						tree = $.fn.zTree.getZTreeObj(treeId),
						nodes = tree.getSelectedNodes(),
						$form = dialogData.form,
						node;
					
					if(nodes && nodes.length > 0){
						node = nodes[0];
						
						if(node.id !== 0){
							$form.find('input[name="parentName"]').val(node.name);
							$form.find('input[name="parentId"]').val(node.id);
						}							
					}
					
					dialog.close();
				}
			}],
			onclose: function(dialog, dialogData, dialogBody) {
				var $form = dialogData.form;
				
				$form.find('input[name="parentName"]').val('');
				$form.find('input[name="parentId"]').val('');
			},
			oncreate: function(dialog, dialogData, dialogBody) {
				$('#' + dialogData.treeId).height($(window).height() - 300);
			},
			onhide: function(dialog, dialogData, dialogBody){
				$.fn.zTree.destroy(dialogData.treeId);
			},
			onshow: function(dialog, dialogData, dialogBody) {
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/sysdept/queryForTree.do',
					success: function(data, json){
						var tmp = [{
							id: 0,
							name: '上级部门列表',
							open: true
						}];
						
						$.each(data, function(i, v){
							tmp.push({
								id: v.id,
								parentId: v.parentId,
								code: v.code,
								name: v.name
							});
						});
						
						$.fn.zTree.init($('#' + dialogData.treeId), {
							data: {
								simpleData: {
									enable: true,
									pIdKey: 'parentId'
								}
							},
							view: {
								selectedMulti: false
							}
						}, tmp);
					},
					failure: function(json, message){
						SpdUI.alert('加载上级部门失败！');
					}
				});
			}
		});
	});
</script>
</jsp:attribute>

</spd:layout>